import cx from 'classnames';
import React, { useEffect, useState } from 'react';
import { CloseIcon as CloseIconSvg } from '../Svg';

export interface Props {
  isShowBg?: boolean;
}
function CloseIcon(props: Props) {
  const { isShowBg } = props;
  const [fillColor, setFillColor] = useState('');

  useEffect(() => {
    setFillColor(isShowBg ? '#fff' : '#abadb3');
  }, [isShowBg]);

  const onMouseOver = () => {
    if (!isShowBg) {
      setFillColor('#262626');
    }
  };
  const onMouseOut = () => {
    if (!isShowBg) {
      setFillColor('#abadb3');
    }
  };

  return (
    <div
      className={cx('closeIcon', { background: isShowBg })}
      onMouseOver={onMouseOver}
      onMouseOut={onMouseOut}
    >
      <CloseIconSvg width={6} height={6} fillColor={fillColor} />
    </div>
  );
}

export default CloseIcon;
